<template>
  <div style="background-color: #fff;">
    <div class="flex  box-lr pd_t_10">
      <scroll-view class="flex groups  box-tb" scroll-y="true"  scroll-with-animation :scroll-into-view="scrollIntoView">
        <div v-for="(group, index) in list" :key="index">
          <div :id="group.groupName">
            <div>
              <div class="jt_flex jt_flex_dr" v-for="(user,idx) in group.users"  :key="idx" :data-index="idx" @click="selectedClick" :data-id="user.id" :data-name="user.name">
                <div class="jt_flex jt_flex_der user-wrap">
                  <div class="jt_flex jt_flex_der user-avatar">
                    <div>{{group.groupName}}</div>
                  </div>
                  <div class="jt_flex jt_flex_dc fs_14 pd_t_b_4 w_80_per">
                    <div class="jt_flex jt_ellipsis_one">
                      {{user.name}}
                    </div>
                    <div class="jt_flex fs_12">
                      {{user.phone}}
                    </div>
                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </scroll-view>

      <div class="nav  box-tb" @touchmove="touchmove" @touchcancel="touchcancel" @touchend="touchend" style="position: fixed;right: 0;top: 128rpx;">
        <div @tap="tabLetter" :data-index="item" :key="item" v-for="(item,index) in letters" class="flex  box-align-center box-pack-center letter">
          <text :class="selectedIndex == item ? 'letter-actived' : ''" class="letter-text">{{item}}</text>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      value: ''
    },
    letters: {
      type: Array,
      value: ''
    }
  },
  data () {
    return {
      // 当前选择的导航字母
      selectedIndex: 0,
      // 选择字母视图滚动的位置id
      scrollIntoView: ''
    }
  },
  // watch: {
  //   letters: function (newVal, oldVal) {
  //     this.letters = newVal
  //   }
  // },
  onShow(){
  
  },
  onLoad (options) {
    const res = wx.getSystemInfoSync()
    this.windowHeight = res.windowHeight
    this.windowWidth = res.windowWidth
    this.pixelRatio = res.pixelRatio
    // 第一个字母距离顶部高度，单位使用的是rpx,须除以pixelRatio，才能与touch事件中的数值相加减，css中定义nav高度为94%，所以 *0.94
    this.navHeight = this.windowHeight * 0.94
    this.eachLetterHeight = this.navHeight / 26
    this.comTop = (this.windowHeight - this.navHeight) / 2
    this.temp = []
    this.eachLetterHeight = this.eachLetterHeight
    // 求各字母距离设备左上角所处位置

    for (let i = 0, len = this.letters.length; i < len; i++) {
      this.x = this.windowWidth - (10 + 50) / this.pixelRatio
      this.y = this.comTop + (i * this.eachLetterHeight)
      this.temp.push([this.x, this.y])
    }
    this.lettersPosition = this.temp
  },
  methods: {
    selectedClick (e) {
      let id = e.currentTarget.dataset.id
      let name = e.currentTarget.dataset.name
      let pages = getCurrentPages()
      let prevPage = pages[pages.length -  2]
      prevPage.setData({
        mydata: {
          id: id,
          name:  name
        }
      })
      wx.navigateBack({
        delta: 1
      })
      // wx.navigateTo({
      //   url: `/packageA/pages/selectSaleOrder/index?customerId=${customerId}`
      // })
    },
    routerToUrl (url) {
      wx.navigateTo({
        url
      })
    },
    tabLetter (e) {
      const index = e.currentTarget.dataset.index
      this.selectedIndex = index
      this.scrollIntoView = index
      this.cleanAcitvedStatus()
    },
    // 清除字母选中状态
    cleanAcitvedStatus () {
      setTimeout(() => {
        this.selectedIndex = 0
      }, 500)
    },
    touchmove (e) {
      this.x = e.touches[0].clientX
      this.y = e.touches[0].clientY
      // 判断触摸点是否在字母导航栏上
      if (this.x >= this.lettersPosition[0][0]) {
        for (let i = 0, len = this.lettersPosition.length; i < len; i++) {
          // 判断落在哪个字母区域，取出对应字母所在数组的索引，根据索引更新selectedIndex及scroll-into-view的值
          this._y = this.lettersPosition[i][1] // 单个字母所处高度
          this.__y = this._y + this.eachLetterHeight // 单个字母最大高度取值范围， 50为字母高50rpx
          if (this.y >= this._y && this.y <= this.__y) {
            this.selectedIndex = this.letters[i]
            this.scrollIntoView = this.letters[i]
            break
          }
        }
      }
    },
    touchend (e) {
      this.cleanAcitvedStatus()
    }
  },
  create () {
    // try {
    var res = wx.getSystemInfoSync()
    // 每一个字母所占的高度
    this.apHeight = res.windowHeight / 26
    this.windowHeight = res.windowHeight
    // } catch (e) {
    //
    // }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #eee;
}
.nav {
  position: fixed;
  right: 10rpx;
  top: 126rpx;
  height: 94%;
  width: 40rpx;
  background: #d8d8d8;
  color: #fff;
  border-radius: 46rpx;
  margin-right: 8rpx;
  z-index: 999;
  font-family: Arial, Helvetica, sans-serif;
}
.letter {
  width: 40rpx;
  height: 50rpx;
  font-size: 30rpx;
}
.letter-text {
  display: inline-block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 50rpx;
  border-radius: 50%;
}
.letter-actived {
  background-color: #49b2f3;
}
.groups {
  height: 100vh;
}
.group-name {
  padding: 10rpx 30rpx;
  height: 50rpx;
  line-height: 50rpx;
}
.group-users {
  background-color: #fff;
}
.user {
  display: flex;
  height: 100rpx;
  border-bottom: 2rpx solid #eee;
  width: 646rpx;
  background: #f5f5f5;
  border-radius: 72rpx;
  padding: 10rpx;
  margin: 10rpx 20rpx;
}
.user-avatar {
  display: flex;
  justify-content: center;
  height: 80rpx;
  font-size: 44rpx;
  width: 80rpx;
  margin-right: 20rpx;
  text-align: center;
  vertical-align: center;
  color: #fff;
  border-radius: 50%;
  background: #d8d8d8;
}
.user-avatar-img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;

  /*width: 70rpx;*/
  /*height: 70rpx;*/
  /*border-radius: 50%;*/
}
.user-wrap {
  width: 90%;
  margin: 8rpx 8% 8rpx 2%;
  padding: 0 20rpx;
  background: #f5f5f5;
  border-radius: 26px;
}
.user-name {
  padding-left: 30rpx;
  display: flex;
  flex-direction: column;
  .a {
    font-size: 32rpx;
    font-weight: 400;
    text-align: left;
    color: #4a4a4a;
  }
  .b {
    height: 18rpx;
    font-size: 26rpx;
    font-weight: 400;
    text-align: left;
    color: #4a4a4a;
    /*line-height: 36rpx;*/
  }
}
</style>
